<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="s"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet"
	href="<s:url value="/resource/css/template.css"/>" />
<link rel="stylesheet"
	href="<s:url value="/resource/css/jquery/ui-lightness/jquery-ui-1.9.2.custom.css"/>" />
<!-- CUSTOMIZE/OVERRIDE THE DEFAULT CSS -->
<style type="text/css">
/* remove padding and scrolling from elements that contain an Accordion OR a content-div */
.ui-layout-center, /* has content-div */ .ui-layout-west,
	/* has Accordion */ .ui-layout-east, /* has content-div ... */
	.ui-layout-east .ui-layout-content { /* content-div has Accordion */
	padding: 0 !important;
	overflow: hidden;
}

.ui-layout-center P.ui-layout-content {
	line-height: 1.4em;
	margin: 0; /* remove top/bottom margins from <P> used as content-div */
}

h3,h4 { /* Headers & Footer in Center & East panes */
	font-size: 1.1em;
	background: #EEF;
	border: 1px solid #BBB;
	border-width: 0 0 1px;
	padding: 7px 10px;
	margin: 0;
}

.ui-layout-east h4 { /* Footer in East-pane */
	font-size: 0.9em;
	font-weight: normal;
	border-width: 1px 0 0;
}
</style>

<fmt:setBundle basename="upc.pilot.resource.messages" var="value" />
<title><fmt:message key="title.login" bundle="${value}" /></title>
<script src="<s:url value="/resource/js/jquery/jquery-1.4.4.min.js" />"
	type="text/javascript"></script>
<script src="<s:url value="/resource/script/main.js" />"
	type="text/javascript"></script>
<script src="<s:url value="/resource/js/jqgrid/grid.locale-en.js" />"
	type="text/javascript"></script>
<script src="<s:url value="/resource/js/jqgrid/jquery.jqGrid.min.js" />"
	type="text/javascript"></script>
<script
	src="<s:url value="/resource/js/tooltip/jquery.cluetip.all.js" />"
	type="text/javascript"></script>
<script src="<s:url value="/resource/js/layout/jquery.layout.min.js" />"
	type="text/javascript"></script>
<script>
	function cargaMensajCentral(id) {
		$.ajax({
			url : '<s:url value="/mostrarDatosOferta.pilot"/>',
			dataType : "html",
			type : "POST",
			data : "codigoOferta=" + id,
			error : function(xhr, ajaxOptions, thrownError) {
				alert("Se genero un error");
			},
			success : function(datos) {
				$("#cargaDatosCentral").html(datos);
			}
		});
	}
</script>
</head>
<body>
	<table border="0" width="100%">
		<tr>
			<td>&nbsp;</td>
			<td>
				<table border="0" cellpadding="0" cellspacing="0" width="100%">
					<tr>
						<c:forEach items="${resultado.listadoSuperior}"
							var="listadoLateral">
							<td>
								<ul id="browser" class="buttonmenu">
									<li><a href="#"
										onclick="javascript: cargaMensajCentral('${listadoLateral.codigo}');"
										class="buttonmenu"><c:out value="${listadoLateral.nombre}" /></a>
									</li>
								</ul>
							</td>
						</c:forEach>
					</tr>
				</table>
			</td>
		</tr>
		<tr height="400px">
			<td width="12%" rowspan="2" valign="top"><c:forEach
					items="${resultado.listadoLateral}" var="listadoLateral">
					<ul id="browser" class="buttonmenu">
						<li><a href="#"
							onclick="javascript: cargaMensajCentral('${listadoLateral.codigo}');">${listadoLateral.nombre}</a></li>
					</ul>
				</c:forEach>
				</td>
			<td colspan="1" valign="top">
				<table width="100%" border="0" height="412">
					<tr>

						<td width="82%" height="80" valign="top">&nbsp;&nbsp;&nbsp;&nbsp;
						</td>
					</tr>
					<tr>
						<td valign="top">&nbsp;&nbsp;&nbsp;&nbsp;
							<div id="cargaDatosCentral">

								<form id="login"
									action="<s:url value="/AutenticarUsuario.pilot" />"
									method="post">
									<!--h1>Control de ingreso</h1 -->
									<div>
										<label><fmt:message key="label.email"
												bundle="${value}" />:</label> <input type="text"
											id='login_username' name='email' class="field required" />
									</div>
									<div>
										<label><fmt:message key="label.clave"
												bundle="${value}" />: </label> <input type="password" id='clave'
											name='clave' class="field required" />
									</div>
									<c:if test="${not empty message}">
										<div>
											<span class="error"><fmt:message key="label.err"
													bundle="${value}" />${message}</span>
										</div>
									</c:if>
									<div class="submit">
										<button type="submit" name="btnIngresar" id="btnIngresar">
											<fmt:message key="button.ingresar" bundle="${value}" />
										</button>

									</div>
									<div>
										<a href='<s:url value="/Responsable"/>'><fmt:message
												key="label.registrarresponsable" bundle="${value}" /></a>
									</div>
								</form>
								<div style="color: red; font-weight: bold; text-align: center;">${resultado.MensajeError}</div>
							</div>
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>
</body>
</html>